<template>
    <div class="service-item" @click="active">
        <span class="title">{{item.title}}</span>
        <div class="icon delete" v-if="!item.unDelete"><i class="el-icon-delete"></i></div>
        <div class="icon edit" v-if="!item.unEdit"><i class="el-icon-edit"></i></div>
    </div>
</template>
<script>
    export default {
        props: ['item', 'deleteEvent', 'editEvent', 'activeEvent'],
        methods: {
            active() {
                this.activeEvent(this.item.serviceId);
            },
        },
    }

</script>
<style scoped>
    .service-item {
        cursor: pointer;
        height: 20px;
        font-style: 14px;
        color: #666;
        position: relative;
        border-bottom: 1px solid #eee;
        padding: 10px 10px 10px 20px;
    }

    .service-item.active {
        background: rgb(121, 152, 255);
        color: #fff;
    }


    .service-item.active .icon {
        color: #fff;
    }

    .service-item:before {
        content: '';
        display: block;
        width: 5px;
        height: 100%;
        position: absolute;
        background: rgb(121, 152, 255);
        top: 0px;
        left: 0;
    }

    .service-item.active:before {
        background: #fff;
    }

    .service-item .title {
        position: absolute;
        left: 15px;
        top: 10px;
        right: 60px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .service-item .icon {
        width: 20px;
        height: 20px;
        font-size: 15px;
        margin: 0 0 0 10px;
        cursor: pointer;
        color: #ccc;
    }

    .service-item .delete {
        float: right;
    }

    .service-item .edit {
        float: right;
    }
</style>